<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
<h1>WebSocket Test for getFlywheelDayAverageSoc</h1>
<button onclick="connectAndSend()">Send Request</button>
<div id="response"></div>

<script>
    let stompClient = null;

    function connectAndSend() {
        const socket = new SockJS('http://localhost:8081/kdlweb-websocket');
        // const socket = new SockJS('ws://localhost:8081/kdlweb-websocket/websocket');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, function(frame) {
            console.log('Connected: ' + frame);

            // Subscribe to the response topic
            stompClient.subscribe('/response/getSiteBaseInfo', function(response) {
                document.getElementById('response').innerHTML = 'Response: ' + response.body;
                console.log('Received: ' + response.body);
            });

            // Send the request with required parameters
            const form = {
                siteName: "坎德拉站点1"   // Example value
            };
            stompClient.send("/app/getSiteBaseInfo", {}, JSON.stringify(form));
        });
    }
</script>
</body>
</html>